import { memo, useState } from 'react';
import type { FC } from 'react';
import { useTranslation } from 'react-i18next';
import { useContext } from 'use-context-selector';
import { useParams } from 'react-router-dom';
import { RiCloseLine } from '@remixicon/react';
import Modal from '@/app/components/base/modal';
import Button from '@/app/components/base/button';
import AutoHeightTextarea from '@/app/components/base/auto-height-textarea/common';
import { Hash02 } from '@/app/components/base/icons/src/vender/line/general';
import { ToastContext } from '@/app/components/base/toast';
import type { SegmentUpdater } from '@/models/datasets';
import { addSegment } from '@/service/datasets';
import TagInput from '@/app/components/base/tag-input';

type NewSegmentModalProps = {
  isShow: boolean;
  onCancel: () => void;
  docForm: string;
  onSave: () => void;
};

const NewSegmentModal: FC<NewSegmentModalProps> = ({ isShow, onCancel, docForm, onSave }) => {
  const { t } = useTranslation();
  const { notify } = useContext(ToastContext);
  const [question, setQuestion] = useState('');
  const [answer, setAnswer] = useState('');
  const { datasetId, documentId } = useParams();
  const [keywords, setKeywords] = useState<string[]>([]);
  const [loading, setLoading] = useState(false);

  const handleCancel = () => {
    setQuestion('');
    setAnswer('');
    onCancel();
    setKeywords([]);
  };

  const handleSave = async () => {
    const params: SegmentUpdater = { content: '' };
    if (docForm === 'qa_model') {
      if (!question.trim()) return notify({ type: 'error', message: t('datasetDocuments.segment.questionEmpty') });
      if (!answer.trim()) return notify({ type: 'error', message: t('datasetDocuments.segment.answerEmpty') });

      params.content = question;
      params.answer = answer;
    } else {
      if (!question.trim()) return notify({ type: 'error', message: t('datasetDocuments.segment.contentEmpty') });

      params.content = question;
    }

    if (keywords?.length) params.keywords = keywords;

    setLoading(true);
    try {
      await addSegment({ datasetId, documentId, body: params });
      notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') });
      handleCancel();
      onSave();
    } finally {
      setLoading(false);
    }
  };

  const renderContent = () => {
    if (docForm === 'qa_model') {
      return (
        <>
          <div className="mb-1 text-xs font-medium text-gray-500">QUESTION</div>
          <AutoHeightTextarea
            outerClassName="mb-4"
            className="leading-6 text-md text-gray-800"
            value={question}
            placeholder={t('datasetDocuments.segment.questionPlaceholder') || ''}
            onChange={(e) => setQuestion(e.target.value)}
            autoFocus
          />
          <div className="mb-1 text-xs font-medium text-gray-500">ANSWER</div>
          <AutoHeightTextarea
            outerClassName="mb-4"
            className="leading-6 text-md text-gray-800"
            value={answer}
            placeholder={t('datasetDocuments.segment.answerPlaceholder') || ''}
            onChange={(e) => setAnswer(e.target.value)}
          />
        </>
      );
    }

    return (
      <AutoHeightTextarea
        className="leading-6 text-md text-gray-800"
        value={question}
        placeholder={t('datasetDocuments.segment.contentPlaceholder') || ''}
        onChange={(e) => setQuestion(e.target.value)}
        autoFocus
      />
    );
  };

  return (
    <Modal isShow={isShow} onClose={() => {}} className="pt-8 px-8 pb-6 !max-w-[640px] !rounded-xl">
      <div className={'flex flex-col relative'}>
        <div className="absolute right-0 -top-0.5 flex items-center h-6">
          <div className="flex justify-center items-center w-6 h-6 cursor-pointer" onClick={handleCancel}>
            <RiCloseLine className="w-4 h-4 text-gray-500" />
          </div>
        </div>
        <div className="mb-[14px]">
          <span className="inline-flex items-center px-1.5 h-5 border border-gray-200 rounded-md">
            <Hash02 className="mr-0.5 w-3 h-3 text-gray-400" />
            <span className="text-[11px] font-medium text-gray-500 italic">
              {docForm === 'qa_model' ? t('datasetDocuments.segment.newQaSegment') : t('datasetDocuments.segment.newTextSegment')}
            </span>
          </span>
        </div>
        <div className="mb-4 py-1.5 h-[420px] overflow-auto">{renderContent()}</div>
        <div className="text-xs font-medium text-gray-500">{t('datasetDocuments.segment.keywords')}</div>
        <div className="mb-8">
          <TagInput items={keywords} onChange={(newKeywords) => setKeywords(newKeywords)} />
        </div>
        <div className="flex justify-end">
          <Button onClick={handleCancel}>{t('common.operation.cancel')}</Button>
          <Button variant="primary" onClick={handleSave} disabled={loading}>
            {t('common.operation.save')}
          </Button>
        </div>
      </div>
    </Modal>
  );
};

export default memo(NewSegmentModal);
